<!--
 * @Author: 杨三炮
 * @Date: 2021-12-04 12:29:10
 * @LastEditors: 杨三炮
 * @LastEditTime: 2021-12-04 19:24:05
 * @FilePath: \daka\src\views\DakaDetails.vue
-->
<template>
  <div class="p-4">
    <div class="title text-2xl font-bold text-center">今日打卡情况</div>
    <div class="flex h-auto">
      <div class="w-2 h-auto bg-red-500 rounded-lg"></div>
      <h3 class="ml-2 font-bold">今日已打卡</h3>
    </div>

    <div
      v-for="(item, index) in getData.dakaStu"
      :key="index"
      class="card w-full h-auto shadow bg-gray-200 mt-3"
    >
      <div class="flex justify-between px-4">
        <!-- 学号 -->
        <div class="flex h-auto items-center">
          <h3 class="font-bold tex">{{ item.stu_id }}</h3>
          <h2 class="ml-2 font-bold">{{ item.username }}</h2>
        </div>
        <div :class="item.current | tishicss">
          {{ item.current | tishi }}
        </div>
      </div>
      <div class="border-b-2 border-gray-200 p-3">
        <h2 v-for="(info, i) in item.current" :key="i" class="text-sm mt-1">
          {{ getData.current[info - 1].title }}
        </h2>
        <div class="flex">
          <p class="text-xs text-green-600 mt-1">
            时间：{{ item.time | date }}
          </p>
          <p class="text-xs text-green-600 mt-1 ml-2">地点：{{ item.place }}</p>
        </div>
      </div>
    </div>

    <div class="flex h-auto mt-3">
      <div class="w-2 h-auto bg-green-500 rounded-lg"></div>
      <h3 class="ml-2 font-bold">今日未打卡</h3>
    </div>

    <div
      v-for="(item, index) in getData.nodakaStu"
      :key="index"
      class="card w-full h-auto shadow bg-gray-200 mt-3"
    >
      <div class="flex justify-between px-4">
        <!-- 学号 -->
        <div class="flex h-auto items-center">
          <h3 class="font-bold tex">{{ item.stu_id }}</h3>
          <h2 class="ml-2 font-bold">{{ item.username }}</h2>
        </div>
        <div class="font-bold bg-yellow-400 p-2 text-white">
        {{item.classes}}
        </div>
      </div>
     
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: 'dakaDetails',
  data () {
    return {
      //获取的信息列表
      getData: {
        current: '',
        dakaStu: '',
        nodakaStu: ''
      },
    }
  },
  filters: {
    date (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm')
    },
    tishi (arr) {
      let xx = ''
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] == 1 && arr.length == 1) {
          xx = '健康'
        } else if (arr[i] == 7) {
          xx = '确诊'
          break
        } else {
          xx = '危险'
        }
      }
      return xx
    },
    tishicss (arr) {
      let xx = ''
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] == 1 && arr.length == 1) {
          xx = 'font-bold bg-green-400 p-2 text-white'
          break
        } else if (arr[i] == 7) {
          xx = 'font-bold bg-red-400 p-2 text-white'
          break
        } else {
          xx = 'font-bold bg-yellow-400 p-2 text-white'
        }
      }
      return xx
    },
  },
  computed: {
    user () {
      return JSON.parse(localStorage.userInfo)
    },
  },
  created () {
    this.getlist()
    this.getDakaStu()
    this.getNoDaKaStu()
  },
  methods: {
    async getlist () {
      const { data: current } = await this.$Axios.get('current')
      this.getData.current = current
    },
    async getDakaStu () {

      const { data: result } = await this.$Axios.get('getdakastu', {
        params: {
          u_id: this.user.teacher_id
        }
      })
      console.log(result);
      this.getData.dakaStu = result.daka
    },
    async getNoDaKaStu () {
      const { data: result } = await this.$Axios.get('getnodakastu', {
        params: {
          u_id: this.user.teacher_id
        }
      })
      this.getData.nodakaStu = result.result
    }
  }
}
</script>

<style>
</style>